<template>
  <el-main>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbNameP }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="el-form query-form el-form--label-right el-form--inline">
      <el-form-item label="发布人">
        <el-input size="small" v-model="formInline.posted_by" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="类型">
      <el-select size="small" v-model="formInline.msg_type" placeholder="请选择" filterable>
        <el-option label="全部" value=""></el-option>
        <el-option v-for="item in infoType" :key="item.code" :value="item.code" :label="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="发布日期">
        <el-date-picker v-model="formInline.plan_send_time" type="date" placeholder="选择日期" format="yyyy - MM - dd " value-format="yyyy-MM-dd">
      </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSearch" icon="el-icon-search">搜 索</el-button>
        <el-button size="small" type="default" @click="handleAdd" icon="el-icon-plus">添加消息
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="margin-top:30px" row-key="id">
    <!-- :formatter="formatTruckCard" -->
      <el-table-column prop="id" label="序号" ></el-table-column>
      <el-table-column prop="msg_type_name" label="类型" ></el-table-column>
      <el-table-column prop="msg_title" label="标题"></el-table-column>
      <el-table-column prop="msg_content" label="内容"></el-table-column>
      <el-table-column prop="posted_by" label="发布人"></el-table-column>
      <el-table-column prop="plan_send_time" label="发布时间"></el-table-column>
      <el-table-column label="操作" :width="250" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handlePush(scope.$index, scope.row)" v-if="scope.row.push_state == 0">发布</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="default" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page="formInline.page" :page-size="formInline.limit"
      :hide-on-single-page="true" layout="total, prev, pager, next" :total="total">
    </el-pagination>
    <el-dialog :title="dialogTitle" :visible.sync="addDialogVisible" width="40%" center :before-close="beforeClose"
      custom-class="center_dislog">
      <el-form ref="editForm" :model="editForm" label-width="80px" :rules="addRules">
        <!-- 消息类型 -->
        <el-form-item label="消息类型" prop="msg_type">
          <el-select v-model="editForm.msg_type" placeholder="请选择" filterable>
            <el-option v-for="(item,index) in infoType" :key="index" :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息标题" prop="msg_title">
          <el-input v-model="editForm.msg_title	" placeholder="请输入"></el-input>
        </el-form-item>
         <!-- 消息内容 -->
        <el-form-item label="消息内容" prop="msg_content">
          <el-input v-model="editForm.msg_content" placeholder="请输入"  type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" :disabled="isDisabled" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </el-main>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  import {
    InfoList,
    addEditInfo,
    EditInfo,
    deleteInfo,
    pushInfo

  } from '../../api.js'
  export default {
    name: "runMangeViolation",
    data() {
      return {
        isAdd: true,
        isDisabled: false,
        addDisabled:false,
        addDialogVisible: false,
        dialogTitle: '',
        breadcrumbName: '',
        breadcrumbPath: '',
        breadcrumbNameP: '',
        tableData: [],
        DriverViolation:[],
        infoType:[],
        //查询栏默认展示数据
        formInline: {
          posted_by: '',
          msg_type:'',
          plan_send_time:'',
          page: 1,
          limit: 5
        },
        editForm: {
          msg_type:'',
          msg_title:'',
          msg_content:'',
        },
        //分页
        total: 0,
        addRules: {
          msg_title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }],
          msg_type: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }],
        },
      }
    },
    async mounted() {
      this.breadcrumbName = this.$route.query.breadcrumbName
      this.breadcrumbPath = this.$route.query.breadcrumbPath
      this.breadcrumbNameP = this.$route.query.breadcrumbNameP
      this.infoType = await this.common.getCode(this.baseUrl, 'msg_type ', this.Token)
      this.getTableDate(this.formInline)
    },
    methods: {
      getTableDate(searchObj) {
        InfoList(searchObj).then(res => {
          if (res.ErrorCode == 0) {
             this.tableData = res.Data.list
             this.total = res.Data.total
          } else {
            this.$message.error(res.ErrorMsg);
          }
        })
      },
      // 添加 
      handleAdd() {
        this.isAdd = true
        this.addDialogVisible = true;
        this.dialogTitle = '添加';
        for (var k in this.editForm) {
          this.editForm[k] = ''
        }
      },
      handlePush(index, row){
        var _this  = this;
        _this.$confirm('此操作將发布该数据, 是否继续？', '提 示', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          center: true
        }).then(() => {
          var data = {
            id : row.id,
          }
          pushInfo(data).then(res => {
            if (res.ErrorCode == 0) {
                _this.getTableDate(_this.formInline);
                _this.$message.success("发布成功");
            } else {
              this.$message.error(res.ErrorMsg);
            }
          })
        }).catch(() => {});
      },
      //编辑
      handleEdit(index, row) {
        this.isAdd = false
        this.dialogTitle = '编辑';
        this.editForm.id = row.id
        this.editForm.msg_type = row.msg_type+'';
        this.editForm.msg_title = row.msg_title
        this.editForm.msg_content = row.msg_content
        this.addDialogVisible = true;
      },
      //表格分页
      handleCurrentChange(val) {
        this.formInline.page = val;
        this.getTableDate(this.formInline)
      },
      //表格查询
      onSearch() {
        this.formInline.page = 1;
        this.getTableDate(this.formInline)
      },
      //刪除
      handleDelete(index, row) {
        var _this = this
        _this.$confirm('此操作將删除该数据, 是否继续？', '提 示', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          center: true
        }).then(() => {
          var data = {
            id : row.id,
          }
          deleteInfo(data).then(res => {
            if (res.ErrorCode == 0) {
                _this.getTableDate(_this.formInline);
                _this.$message.success("删除成功");
            } else {
              this.$message.error(res.ErrorMsg);
            }
          })
        }).catch(() => {});
      },
      selectTruk(e){
        var _this = this
        this.editForm.truck_card = "";
        var data={
          driver_id:e,
        }
        ViolationTruckList(data).then(res => {
            if (res.ErrorCode == 0) {
              _this.DriverViolation = res.Data
            } else {
              this.$message.error(res.ErrorMsg);
            }
          })
      },
      //提交
      addSubmit() {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            var _this = this;
            _this.isDisabled = true;
            var dataObj = JSON.parse(JSON.stringify(_this.editForm)) ;
            if(_this.isAdd){
              addEditInfo(dataObj).then(res => {
                if (res.ErrorCode == 0) {
                    _this.addDialogVisible = false;
                    _this.$message.success("添加成功");
                    _this.getTableDate(_this.formInline);
                    _this.isDisabled = false;
                } else {
                    _this.isDisabled = false;
                  this.$message.error(res.ErrorMsg);
                }
              })
            }else{
              dataObj.id = _this.editForm.id
              EditInfo(dataObj).then(res => {
                if (res.ErrorCode == 0) {
                    _this.addDialogVisible = false;
                    _this.$message.success("编辑成功");
                     _this.isDisabled = false;
                    _this.getTableDate(_this.formInline);
                } else {
                    _this.isDisabled = false;
                  this.$message.error(res.ErrorMsg);
                }
              })
            }
          }
        })
      },
      beforeClose() {
        this.addDialogVisible = false
        this.$refs.editForm.resetFields();
      },
      formatNorm(row, column, cellValue) {
        return row.loadRangeMin + '~' + row.loadRangeMax
      },
        handleRemove(file, fileList) {
        console.log(file, fileList);
      },

    
    },
    computed: {
      ...mapState({
        baseUrl: state => state.baseUrl,
        Token: state => state.access_token,
      }),
    },
  }
</script>

<style scoped>
  main>>>.el-icon-date {
    right: -30px;
  }

  main>>>.el-date-editor.el-input.el-date-editor--date {
    width: 100%;
  }

  .tips {
    color: #f56c6c;
    font-size: 12px;
  }

  main>>>.el-form-item__content {
    line-height: 24px;
  }
</style>